<template>
  <div class="view-wrapper">
    <div class="main">
      <div class="steps" v-if="pathType == 'revise' || pathType == 'add'">
        <el-steps :active="active" align-center>
          <el-step title="填写商品信息" description="赚卡基本信息"></el-step>
          <el-step title="完成" description="等待审核商品信息"></el-step>
        </el-steps>
      </div>
      <div class="steps" v-if="pathType == 'edit' || pathType == 'review'">
        <el-steps :active="active" align-center>
          <el-step title="填写商品信息" description="赚卡基本信息"></el-step>
          <el-step title="选择参加运营活动" description="同商品底下活动"></el-step>
          <el-step title="完成" description="等待审核商品信息"></el-step>
        </el-steps>
      </div>
      <template v-if="active == 1">
        <div class="txt" v-if="infoData.refundCause">拒绝原因：{{infoData.refundCause}}</div>
        <el-form :model="oneForm" :rules="oneRules" ref="oneForm" label-width="140px" class="demo-ruleForm" :disabled="disabled" >
          <div class="title">基本信息</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="卡名称：" prop="name" >
                <el-input placeholder="请填写卡名称" v-model="oneForm.name" maxlength="50"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属门店：" prop="merchantId">
                <el-select v-model="oneForm.merchantId" filterable placeholder="请选择门店" :disabled="pathType != 'add'" @change="changeMerchantId">
                  <el-option v-for="item in merchantList" :key="item.id" :label="item.value" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="isChain">
            <el-col :span="12">
              <el-form-item label="店铺名称：" prop="selStortList">
                <el-select v-model="oneForm.selStortList" filterable multiple placeholder="请选择店铺" @change="changeChainShopList">
                  <el-option v-for="item in stortList" :key="item.id" :label="item.value" :value="item.id">
                    <span>{{item.value}}（{{item.additionalValue}}）</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="选择标签：" prop="">
                <el-select v-model="oneForm.tagIdList" filterable multiple placeholder="请选择标签" >
                  <el-option v-for="item in tagList" :key="item.id" :label="item.value" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="赚卡有效期：" prop="expireDate"> 
                  <el-date-picker
                    v-model="oneForm.expireDate"
                    @change="getEarnACardTime"
                    type="daterange" 
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    >
                  </el-date-picker>
                </el-form-item>
            </el-col>
          </el-row>
          <div class="title">价格信息</div>
          <el-row>
            <el-col :span="8" >
              <el-form-item label="APP/小程序剩余库存：" prop="issueTotal" label-width="180px">
                <el-input placeholder="请输入库存" v-model="oneForm.issueTotal"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" >
              <el-form-item label="原价：" prop="equityWorth">
                <el-input placeholder="请输入原价" v-model="oneForm.equityWorth">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" >
              <el-form-item label="销售价：" prop="price">
                <el-input placeholder="请输入销售价" v-model="oneForm.price">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否限购：" ref="limitBuyTypeRef" prop="limitBuyType">
                <el-radio-group v-model="oneForm.limitBuyType" @input="radioInput">
                  <el-radio :label="'1'">不限</el-radio>
                  <el-radio :label="'2'">限购数量</el-radio>
                  <el-radio :label="'3'">未消费用户限购</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="" prop="limitAmount" v-if="oneForm.limitBuyType != '1'">
                <el-input placeholder="请输入每人限购数量" v-model="oneForm.limitAmount">
                  <template slot="append">件</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="title">主视图</div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="缩略图:" prop="thumbnail" >
                <div class="list-img-box">
                  <div v-if="oneForm.thumbnail !== ''">
                    <img class="souImg" :src="oneForm.thumbnail" style='width:150px;height:150px' alt="自定义封面"  @click="uploadPicture()">
                  </div>
                  <div v-else class="upload-btn" style="height: 120px;" @click="uploadPicture()">
                    <i class="el-icon-plus" style="font-size: 30px;"></i>
                    <span>封面设置</span>
                  </div>
                </div>
                <input type="hidden" v-model="oneForm.thumbnail" placeholder="请添加封面">
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="头图:" prop="coverList"  ref="imgRef">
                <ImageUploadMore :limit="6" :fileSize="2" :uplateType="'2'" @successImg="successImg($event)" 
                    :value="oneForm.coverList" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 权益详情 -->
          <div class="title">
            <div style="display: flex;justify-content: space-between;">
              <span>权益详情</span>
              <el-form-item label="前端页面展示：" prop="equityDisplay">
                  <el-switch
                    v-model="oneForm.equityDisplay"
                    active-value="1"
                    inactive-value="2"
                    active-text="开启"
                    inactive-text="关闭"
                    @change="changeEquityDisplay"
                    >
                  </el-switch>
              </el-form-item>
              <el-form-item label="是否启用权益标题：" prop="" style="margin-left: 20px;">
                  <el-switch
                    v-model="oneForm.equityTitleStatus"
                    active-value="2"
                    inactive-value="1"
                    active-text="开启"
                    inactive-text="关闭"
                    @change="changeEquityTitleStatus"
                    >
                  </el-switch>
              </el-form-item>
            </div>
            <div style="margin-left: 100px;" v-if="oneForm.equityTitleStatus == 2">
              <el-button type="primary" size="small" @click="addTitle()" >新增权益标题
              </el-button>
            </div>
          </div>

          <template v-if="oneForm.equityDisplay == 1 ">
            <el-row style="margin-bottom: 20px" v-if="oneForm.equityTitleStatus == 1">
              <el-col :span="24">
                <el-table :data="oneForm.equityList" border show-summary sum-text="小计">
                  <el-table-column label="权益序号"  type="index" width="100" />
                  <el-table-column label="权益名称" align="center" prop="equityTitle" >
                    <template slot-scope="scope">
                      <el-form-item label="" label-width="0" :prop="'equityList.' + scope.$index + '.equityTitle'" :rules="oneRules.equityTitle" >
                        <el-input  placeholder="请输入权益名称" v-model="scope.row.equityTitle" maxlength="50" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量" align="" prop="equityAmount" >
                    <template slot-scope="scope">
                      <el-form-item label="" label-width="0" :prop="'equityList.' + scope.$index + '.equityAmount'" :rules="oneRules.equityAmount">
                        <el-input  placeholder="请输入" v-model="scope.row.equityAmount" maxlength="10" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="单件标价（￥）" align="center" prop="equityPrice">
                    <template slot-scope="scope">
                      <el-form-item label="" label-width="0" :prop="'equityList.' + scope.$index + '.equityPrice'" :rules="oneRules.equityPrice">
                        <el-input  placeholder="请输入单件标价" v-model="scope.row.equityPrice" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  width="150">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" @click="addEquity(scope.$index)" v-if="scope.$index == 0">新增</el-button>
                      <el-button size="mini" type="text" @click="reduceEquity(scope.$index)" v-if="scope.$index != 0">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <div  v-if="oneForm.equityTitleStatus == 2">
              <div class="equityBox" style="margin-bottom: 20px" v-for="(item,index) in oneForm.equityTitleList" :key="100+index">
                <div class="headBox">
                  <el-form-item label="新增权益标题"  :prop="`equityTitleList.${index}.equityTitle`" :rules="{ required: true,message: '请输入权益标题',trigger: ['change', 'bulr']}">
                    <el-input maxlength="20" placeholder="请输入权益标题" v-model="item.equityTitle"  >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="权益类型：">
                    <el-radio-group v-model="item.equityType" @change="$event => changeEquityType($event,index)">
                      <el-radio :label="'1'">正常权益</el-radio>
                      <el-radio :label="'2'">用户选择权益</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="可选择数量" :prop="`equityTitleList.${index}.optionalQuantity`"  :rules="oneRules.optionalQuantity" v-if="item.equityType == 2 && item.isShow">
                    <el-input placeholder="请输入数量(如该权益为3选1,请填写1)" v-model="item.optionalQuantity" @blur="$event =>blurOptionalQuantity($event,index)">
                    </el-input>
                    <el-button style="margin-left: 14px" size="mini" type="primary" @click="$event =>submitOptionalQuantity($event,index)">保存</el-button>
                  </el-form-item>
                  <el-form-item label="权益类型：" v-if="item.equityType == 2 && !item.isShow">
                      <span>{{item.detailList.length}}选{{item.optionalQuantity}}</span>
                      <el-button style="margin-left: 14px" size="mini" type="primary" @click="$event =>editOptionalQuantity($event,index)">修改</el-button>

                  </el-form-item>
                  <div class="btn">
                    <el-button size="mini" type="danger" @click="deleteTitleEquity(index)" v-if="index != 0">删除</el-button>
                  </div>
                </div>
                <el-row  v-for="(bitem,bindex) in item.detailList" :key="1000+bindex">
                  <el-col :span="7">
                    <el-form-item :label="`权益${bindex+1}`" label-width="60px" :prop="`equityTitleList.${index}.detailList.${bindex}.equityTitle`" :rules="oneRules.equityTitle">
                      <el-input  placeholder="请输入权益名称" v-model="bitem.equityTitle" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="数量" label-width="60px" :prop="`equityTitleList.${index}.detailList.${bindex}.equityAmount`" :rules="oneRules.equityAmount">
                      <el-input  placeholder="请输入权益数量,例如：1份" v-model="bitem.equityAmount"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="单价" label-width="60px" :prop="`equityTitleList.${index}.detailList.${bindex}.equityPrice`" :rules="oneRules.equityPrice">
                      <el-input  placeholder="请输入权益单价" v-model="bitem.equityPrice" @change="$event => changePrice($event,item,index)"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-button size="mini" type="primary" @click="addEqList(index)" v-if="bindex == 0">新增</el-button>
                    <el-button size="mini" type="danger" @click="deleteEquity(index,bindex)" v-if="bindex != 0">删除</el-button>
                  </el-col>
                </el-row>
                <el-row >
                  <div>小计：{{item.subtotal}}</div>
                </el-row>
              </div>
              <el-row >
                <div>合计：{{oneForm.equityTotal}}</div>
              </el-row>
            </div>
          </template>
          
          
          <!-- 权益说明 -->
          <div class="title">
            <span>权益说明</span>
            <el-form-item label="前端页面展示：" prop="equityExplainDisplay">
                <el-switch
                  v-model="oneForm.equityExplainDisplay"
                  active-value="1"
                  inactive-value="2"
                  active-text="开启"
                  inactive-text="关闭"
                  >
                </el-switch>
            </el-form-item>
          </div>
          <template v-if="oneForm.equityExplainDisplay == 1">
            <el-row>
              <el-col :span="18">
                <el-form-item label="" prop="equityExplain" label-width="0"> 
                  <el-input
                    type="textarea"
                    maxlength="1000"
                    :autosize="{ minRows: 5, maxRows: 10}"
                    placeholder="请输入内容"
                    v-model="oneForm.equityExplain">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>

          <!-- 购买须知 -->
          <div class="title">
            <span>购买须知</span>
            <el-form-item label="前端页面展示：" prop="buyDisplay">
                <el-switch
                  v-model="oneForm.buyDisplay"
                  active-value="1"
                  inactive-value="2"
                  active-text="开启"
                  inactive-text="关闭"
                  >
                </el-switch>
            </el-form-item>
          </div>
          <template v-if="oneForm.buyDisplay == 1">
            <el-row>
              <el-col :span="18">
                <el-form-item label="" prop="buyNotes" label-width="0"> 
                  <el-input
                    type="textarea"
                    maxlength="1000"
                    :autosize="{ minRows: 5, maxRows: 10}"
                    placeholder="请输入内容"
                    v-model="oneForm.buyNotes">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <div class="title">
            <span>图文介绍</span>
            <el-form-item label="前端页面展示：" prop="imageTextDisplay">
                <el-switch
                  v-model="oneForm.imageTextDisplay" 
                  active-value="1"
                  inactive-value="2"
                  active-text="开启"
                  inactive-text="关闭"
                  >
                </el-switch>
            </el-form-item>
          </div>
          <template v-if="oneForm.imageTextDisplay == 1">
            <el-row>
              <el-col :span="24">
                <el-form-item label="图文介绍:" prop="imageTextList"  ref="commodityImgListRef">
                  <ImageUploadMore :limit="6" :fileSize="2" :uplateType="'2'" @successImg="getCommodityImgList($event)" 
                    :value="oneForm.imageTextList" />
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-form>
        <div class="button_box">
          
          <el-button
            type="primary"
            :loading="AgreeLoading"
            @click="submitOne('oneForm',1)"
            v-if="pathType == 'add' || pathType == 'revise'"
          >保存草稿</el-button>
          <el-button
            type="primary"
            :loading="AgreeLoading"
            @click="submitOne('oneForm',2)"
            v-if="pathType == 'edit'"
          >保存</el-button>
          <el-button
            type="primary"
            :loading="AgreeLoading"
            @click="submitOne('oneForm',2)"
            v-if="pathType == 'add'|| pathType == 'revise'"
          >保存提交审核</el-button>
          <el-button
            type="primary"
            @click="next('oneForm')"
            v-if="pathType == 'edit' || pathType == 'review'"
          >下一步</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>
      </template>
      <template  v-if="active == 2">
        <el-form :model="twoForm" :rules="twoRules" ref="twoForm" label-width="140px" class="demo-ruleForm" >
          <div class="title">
            <span>消费后激励活动</span>
            <el-form-item label="活动状态：">
                <el-switch
                  v-model="twoForm.incentivePO.incentiveStatus"
                  active-value="1"
                  inactive-value="2"
                  active-text="开启"
                  inactive-text="关闭"
                  >
                </el-switch>
            </el-form-item>
          </div>
          <template v-if="twoForm.incentivePO.incentiveStatus == 1">
            <el-row>
              <el-col :span="12">
                <el-form-item label="活动时间：" prop="date"> 
                  <el-date-picker
                    v-model="twoForm.date"
                    @change="getTime"
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="" prop="checkList" label-width="0">
                  <el-checkbox-group v-model="twoForm.checkList" @change="changeCheckList($event)">
                    <div class="checkBox">
                      <el-checkbox label="1">完成每笔赚卡消费后，奖励</el-checkbox>
                      <el-form-item label="" :key="twoForm.incentivePO.cocoIncentive+ 100" :prop="twoForm.incentivePO.cocoIncentive == 1 ? 'incentivePO.cocoIncentiveAmount': ''" label-width="0">
                        <el-input placeholder="请输入" v-model="twoForm.incentivePO.cocoIncentiveAmount"></el-input>
                        <span>个COCO；前</span>
                      </el-form-item>
                      <el-form-item label="" :key="twoForm.incentivePO.cocoIncentive+ 200" :prop="twoForm.incentivePO.cocoIncentive == 1 ? 'incentivePO.cocoStock': ''" label-width="0">
                        <el-input placeholder="请输入" v-model="twoForm.incentivePO.cocoStock"></el-input>
                        <span>份完成消费可获得</span>
                      </el-form-item>
                      <el-tooltip style="margin-left: 14px;" class="item" effect="dark" :content="tipText" placement="top">
                        <el-button size="min"  type="primary" icon="el-icon-warning-outline" ></el-button>
                      </el-tooltip>
                    </div>
                    <div class="checkBox">
                      <el-checkbox label="2">完成每笔赚卡消费后，奖励</el-checkbox>
                      <el-form-item label="" :key="twoForm.incentivePO.tfIncentive+ 300" :prop="twoForm.incentivePO.tfIncentive == '1' ? 'incentivePO.tfIncentiveAmount': ''" label-width="0">
                        <el-input placeholder="请输入" v-model="twoForm.incentivePO.tfIncentiveAmount"></el-input>
                        <span>个椰分；前</span>
                      </el-form-item>
                      <el-form-item label="" :key="twoForm.incentivePO.tfIncentive+ 400" :prop="twoForm.incentivePO.tfIncentive == '1' ? 'incentivePO.tfStock': ''" label-width="0">
                        <el-input placeholder="请输入" v-model="twoForm.incentivePO.tfStock"></el-input>
                        <span>份完成消费可获得</span>
                      </el-form-item>
                      <el-tooltip style="margin-left: 14px;" class="item" effect="dark" :content="tipText" placement="top">
                        <el-button size="min"  type="primary" icon="el-icon-warning-outline" ></el-button>
                      </el-tooltip>
                    </div>
                    <div class="checkBox">
                      <el-checkbox label="3">完成每笔赚卡消费后，奖励</el-checkbox>
                      <el-form-item label="" :key="twoForm.incentivePO.medalIncentive + 5" :prop="twoForm.incentivePO.medalIncentive == 1 ? 'incentivePO.equityCardId': ''" label-width="0">
                        <el-select v-model="twoForm.incentivePO.equityCardId" placeholder="请选择" size="small" filterable @change="changeEquityCardId">
                          <el-option v-for="item in equitySelectList" :key="item.id" :label="item.value" :value="item.id">
                          </el-option>
                        </el-select>  
                        <span>勋章</span>
                      </el-form-item>
                    </div>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin-bottom: 20px">
              <el-col :span="24">
                <el-table :data="equityInfoList" border>
                  <el-table-column label="卡名称" align="center" prop="cardName" :show-overflow-tooltip="true"/>
                  <el-table-column label="卡功能" align="center" prop="functionType" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <dict-tag :options="functionTypeList" :value="scope.row.functionType" />
                    </template>
                  </el-table-column>
                  <el-table-column label="发行方" align="center" prop="issuerName" :show-overflow-tooltip="true"/>
                  <el-table-column label="上链时间" align="center" prop="chainTime" :show-overflow-tooltip="true"/>
                  <el-table-column label="单价" align="center" prop="price" :show-overflow-tooltip="true"/>
                  <el-table-column label="库存总量" align="center" prop="total" :show-overflow-tooltip="true"/>
                  <el-table-column label="剩余库存" align="center" prop="usable" :show-overflow-tooltip="true"/>
                </el-table>
              </el-col>
            </el-row>
          </template>
          <div class="title">
            <span>同行助力激励活动</span>
            <el-form-item label="活动状态：">
                <el-switch
                  v-model="twoForm.assistancePO.incentiveStatus"
                  active-value="1"
                  inactive-value="2"
                  active-text="开启"
                  inactive-text="关闭"
                  >
                </el-switch>
            </el-form-item>
          </div>
          <template v-if="twoForm.assistancePO.incentiveStatus == 1">
            <el-row>
              <el-col :span="7">
                <el-form-item label="活动库存数量：" prop="assistancePO.stockStatus">
                  <el-radio-group v-model="twoForm.assistancePO.stockStatus">
                    <el-radio :label="'1'">不限制</el-radio>
                      <el-radio :label="'2'">限制</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="twoForm.assistancePO.stockStatus == 2">
                <el-form-item label="" prop="assistancePO.stock" label-width="0" v-if="pathType == 'add'">
                  <el-input placeholder="请输入添加库存" v-model="twoForm.assistancePO.stock">
                    <template slot="append">份</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="" label-width="0"  v-if="pathType == 'edit' || pathType == 'review'">
                  <el-input placeholder="请输入添加库存" v-model="twoForm.assistancePO.stock">
                    <template slot="append">份</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="(pathType == 'edit' || pathType == 'review') && twoForm.assistancePO.stockStatus == 2">
                <div class="stockNum">活动剩余名额: {{residueStock}}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="活动有效期：" >
                  <div class="timeBox">
                    <el-form-item label="" label-width="0" prop="assistancePO.expirationDateHour">
                      <el-input placeholder="时" v-model="twoForm.assistancePO.expirationDateHour" />
                    </el-form-item>
                    <span> - </span>
                    <el-form-item label="" label-width="0" prop="assistancePO.expirationDateMinute">
                      <el-input placeholder="分" v-model="twoForm.assistancePO.expirationDateMinute" />
                    </el-form-item>
                    <!-- <span> - </span>
                    <el-form-item label="" label-width="0" prop="assistancePO.expirationDateSecond">
                      <el-input placeholder="秒" v-model="twoForm.assistancePO.expirationDateSecond" />
                    </el-form-item> -->
                    <span>内</span>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="inpBox">
                  <el-form-item label="每份最大助力人数" prop="assistancePO.maxPeopleNum">
                    <el-input placeholder="请输入最大助力人数" v-model="twoForm.assistancePO.maxPeopleNum">
                      <template slot="append">人</template>
                    </el-input>
                  </el-form-item>
                  <span class="blue">（通常为套餐指定使用人数）</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="inpBox">
                  <el-form-item label="活动奖励类型为" prop="assistancePO.integralType">
                    <el-select v-model="twoForm.assistancePO.integralType" placeholder="请选择" size="small" filterable>
                      <el-option v-for="item in integralTypeList" :key="item.id" :label="item.value" :value="item.id">
                      </el-option>
                    </el-select>
                    <span>活动保底获得</span>
                  </el-form-item>
                  <el-form-item label="" prop="assistancePO.guaranteeAmount" label-width="0">
                    <el-input placeholder="请输入" v-model="twoForm.assistancePO.guaranteeAmount">
                      <template slot="append" v-if="twoForm.assistancePO.integralType == 1">CoCo</template>
                      <template slot="append" v-if="twoForm.assistancePO.integralType == 2">椰分</template>
                    </el-input>
                    <span>，最多赠送</span>
                  </el-form-item>
                  <el-form-item label="" prop="assistancePO.maxGiveAmount" label-width="0">
                    <el-input placeholder="请输入" v-model="twoForm.assistancePO.maxGiveAmount">
                      <template slot="append" v-if="twoForm.assistancePO.integralType == 1">CoCo</template>
                      <template slot="append" v-if="twoForm.assistancePO.integralType == 2">椰分</template>
                    </el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="tipsBox">根据配置保底最少积分x ，最多邀请人数 y，最多赠送积分 z(含保底) ，则新用户（z-x）/ y ±10%浮动；老用户（z-x）/ y /5 ±10%浮动</div>
              </el-col>
            </el-row>
            <el-row>
              <div class="calculateBox">
                <div class="biaoG">
                  <div class="head">
                    <div>每个新用户助力而可获</div>
                    <div>每个老用户助力而可获</div>
                  </div>
                  <div class="head">
                    <div>{{simulationData.newMin}} ~ {{simulationData.newMax}}</div>
                    <div>{{simulationData.oldMin}} ~ {{simulationData.oldMax}}</div>
                  </div>
                </div>
                <div>
                  <el-button type="primary"  @click="simulation">模拟计算</el-button>
                </div>
              </div>
            </el-row>
          </template>

          <div class="title">
            <span>运营补贴活动</span>
            <el-form-item label="活动状态：">
                <el-switch
                  v-model="twoForm.subsidyVO.subsidyStatus"
                  active-value="1"
                  inactive-value="2"
                  active-text="开启"
                  inactive-text="关闭"
                  >
                </el-switch>
            </el-form-item>
          </div>
          <template v-if="twoForm.subsidyVO.subsidyStatus == 1">
            <el-row>
              <el-col :span="8">
                <el-form-item label="活动支付方式" prop="subsidyVO.payType">
                  <el-select v-model="twoForm.subsidyVO.payType" filterable placeholder="请选择活动支付方式">
                    <el-option v-for="item in payList" :key="item.id" :label="item.value" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="补贴方式" prop="subsidyVO.subsidyType">
                  <el-select v-model="twoForm.subsidyVO.subsidyType" filterable placeholder="请选择补贴方式">
                    <el-option v-for="item in subsidyList" :key="item.id" :label="item.value" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" v-if="twoForm.subsidyVO.payType == 1">
                <el-form-item label="补贴活动价" prop="subsidyVO.cashAmount">
                  <el-input placeholder="请输入" v-model="twoForm.subsidyVO.cashAmount">
                    </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="twoForm.subsidyVO.payType == 2">
              <el-col :span="8">
                <el-form-item label="支付现金" prop="subsidyVO.cashAmount">
                  <el-input placeholder="请输入" v-model="twoForm.subsidyVO.cashAmount">
                    </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="twoForm.subsidyVO.payType == 2 || twoForm.subsidyVO.payType == 3">
              <el-col :span="8">
                <el-form-item label="支付椰分" prop="subsidyVO.integralAmount">
                  <el-input placeholder="请输入" v-model="twoForm.subsidyVO.integralAmount">
                    </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-form>
        <div class="button_box">
          <template v-if="pathType != 'review'">
            <el-button
              type="primary"
              :loading="AgreeLoading"
              @click="submitTwo('twoForm',2)"
            >保存，下一步</el-button>
            <el-button
              type="primary"
              :loading="AgreeLoading"
              @click="submitConfig()"
              v-if="pathType == 'add'"
            >跳过，暂不配置活动</el-button>
            <el-button
              type="primary"
              :loading="AgreeLoading"
              @click="prev('twoForm')"
            >上一步</el-button>
            <el-button @click="handleClose">取消</el-button>
          </template>

          <template  v-if="pathType == 'review'">
          <el-button
            type="primary"
            :loading="AgreeLoading"
            @click="prev('twoForm')"
          >上一步</el-button>
          <el-button type="primary" :loading="AgreeLoading" @click="reject('twoForm')" v-if="infoData.sellStatus == 4"
          >拒绝</el-button>
            <el-button type="primary" :loading="AgreeLoading" @click="agree('twoForm')" v-if="infoData.sellStatus == 4"
          >同意发布</el-button>
          </template>
        </div>
      </template>  
      <template v-if="active == 3">
        <div class="statusBox">
          <div class="status">
            <img src="@/static/dengdai.png" alt="">
            <div class="tips">配置完成，等待审核</div>
          </div>
          <el-form :model="twoForm" :rules="twoRules" ref="twoForm" label-width="340px" class="demo-ruleForm" >
            <el-form-item label="可提前配置，审核通过后是否直接上架：" prop="stock">
              <el-radio-group v-model="threeForm.status">
                <el-radio :label="1">暂不上架</el-radio>
                <el-radio :label="2">审核通过后，立即上架</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div class="button_box">
          <el-button @click="submitClose">关闭</el-button>
        </div>
      </template>
    </div>
    <el-dialog
      title="拒绝原因"
      :visible.sync="dialogVisible"
      width="500"
      :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="" prop="name" label-width="0">
          <el-row>
              <el-col :span="24">
                <el-form-item label="" prop="refundCause" label-width="0"> 
                  <el-input
                    type="textarea"
                    maxlength="500"
                    :autosize="{ minRows: 10, maxRows: 20}"
                    placeholder="请输入拒绝原因"
                    v-model="ruleForm.refundCause">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitReview('ruleForm')">拒绝</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
        title="裁切封面"
        :visible.sync="cropperModel"
        width="950px"
        center
      >
      <upload-cropper
          :Name="'缩略图'"
          @uploadImgSuccess = "handleUploadSuccess"
          ref="child">
      </upload-cropper>
    </el-dialog>
  </div>
</template>
    
<script>
  import Loading from "@/components/Loading/index";
  // api
  import {
    addCard,
    editCard,//编辑
    modifyCard,//修改
    equityDetail,
    cardDetail,
    equitySelect,
    auditCard,
    upStatus,
    addTagSelect,
    shopSelect,
  } from "@/api/merchantsNFR/yeCard"; 
  import {
    chainSelect,
  } from "@/api/merchantsNFR/castingApplication";
  import '@wangeditor/editor/dist/css/style.css'
  import uploadCropper from "@/components/uploadCropper";
  export default {
  name: "",
  components: {
    uploadCropper
  },
  data() {
    var checkTime = (rule, value, callback) => {
        //总库存限制数量校验
        let regNumber = /^\+?[0-9]\d*$/; //大于0的正整数
      if (value === '') {
        return callback(new Error("请输入时间"));
      } else if (regNumber.test(value) == false) {
        return callback(new Error("请输入大于或等于0正整数"));
      } else if (value > 60) {
        return callback(new Error("请输入小于或等于60正整数"));
      } else {
        return callback();
      }
    };
    /* 可以等于0的整数 */
    var checkZeroInteger = (rule, value, callback) => {
      //总库存限制数量校验
      let regNumber = /^\+?[0-9]\d*$/; //大于0的正整数
      if (!value ) {
        return callback(new Error("请输入"));
      } else if (regNumber.test(value) == false) {
        return callback(new Error("请输入大于0正整数"));
      } else {
        return callback();
      }
    };
    /* 大于0的整数 */
    var checkInteger = (rule, value, callback) => {
      //总库存限制数量校验
      let regNumber = /^\+?[0-9]\d*$/; //等于0的正整数
      if (value === '' ) {
        return callback(new Error("请输入"));
      } else if (regNumber.test(value) == false) {
        return callback(new Error("请输入大于或等于0正整数"));
      } else {
        return callback();
      }
    };
    /* 大于0的两位小数 */
    var checkDecimal = (rule, value, callback) => {
      let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
      if (!value) {
        return callback(new Error("请输入"));
      } else if (regNumber.test(value) == false) {
        return callback(new Error("请填写大于0且最多保留两位小数的数值"));
      } else {
        return callback();
      }
      
    };
    /* 等于于0的两位小数 */
    var checkEquityPrice = (rule, value, callback) => {
      let regNumber = /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
      if (value === '') {
        return callback(new Error("请输入"));
      } else if (regNumber.test(value) == false) {
        return callback(new Error("请填写大于或等于0且最多保留两位小数的数值"));
      } else {
        return callback();
      }
      
    };
    var checkGuaranteeAmount = (rule, value, callback) => {
      let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
      if (!value) {
        return callback(new Error("请输入"));
      } else if (regNumber.test(value) == false) {
        return callback(new Error("请填写大于0且最多保留两位小数的数值"));
      } else if (value >= this.twoForm.assistancePO.maxGiveAmount && this.twoForm.assistancePO.maxGiveAmount ) {
        return callback(new Error("只能填写小于最多赠送的数值"));
      }else {
        return callback();
      }
      
    };
    var checkMaxGiveAmount = (rule, value, callback) => {
      var guaranteeAmount = parseFloat(this.twoForm.assistancePO.guaranteeAmount)
      var value = parseFloat(value)
      console.log('this.twoForm.assistancePO.guaranteeAmount',)
      let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
      if (!value) {
        return callback(new Error("请输入"));
      } else if (regNumber.test(value) == false) {
        return callback(new Error("请填写大于0且最多保留两位小数的数值"));
      } else if ( guaranteeAmount >= value ) {
        return callback(new Error("只能填写大于保底获得的数值"));
      }else {
        return callback();
      }
      
    };
    var checkPrice = (rule, value, callback) => {
      var equityWorth = parseFloat(this.oneForm.equityWorth)
      var value = parseFloat(value)
      console.log('this.twoForm.assistancePO.guaranteeAmount',)
      let regNumber = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
      if (!value) {
        return callback(new Error("请输入"));
      } else if (regNumber.test(value) == false) {
        return callback(new Error("请填写大于0且最多保留两位小数的数值"));
      } else if ( equityWorth < value ) {
        return callback(new Error("售价不能大于原价"));
      }else {
        return callback();
      }
      
    };
    return {
      cropperModel: false,
      active: 1,
      successId: '',//新增成功放回的Id
      title: "新增首页弹窗活动",
      loading: false,
      disabled: false,
      AgreeLoading: false,
      dialogVisible: false,
      equityTitle: '新增权益标题',
      titleIndex: 0,
      pathType: 'add',
      permissions: 1,
      isEquitySubmit: true,
      merchantList: [],//所属门店
      stortList: [],//适用门店
      payList: [
        {id: '1', value: '现金支付'},
        {id: '2', value: '现金+积分支付'},
        {id: '3', value: '积分支付'},
      ],
      subsidyList: [
        {id: '1', value: '平台补贴'},
        {id: '2', value: '商户补贴'},
      ],
      isChain: false,
      residueStock: 0,
      keepEquityList: [],//缓存权益信息
      // 第一步数据
      oneForm: {
        id: '',
        name: "", //活动名称  
        merchantId: '',//所属门店商家id
        tagIdList: [],//标签id列表
        chainId: '',//连锁总部id
        chainShopList: [],//连锁店铺列表
        selStortList: [],//连锁门店，校验用
        issueTotal: '', //	库存
        equityWorth: '',//原价
        price: '',//销售价
        limitBuyType: '1',//限购类型 1 不限购 2 限购
        limitAmount: '',//限购数量
        thumbnail: '',//缩略图
        coverList: [], //头图
        equityDisplay: '1',//权益详情前端展示 1 显示 2 隐藏
        equityTitleStatus: '1',//	权益标题状态 1 不启用 2 启用
        equityExplainDisplay: '1', //权益说明前端展示 1 显示 2 隐藏
        equityTotal: '',//权益总计
        equityList: [
          {
            sort: '1',//排序号
            equityTitle: '',//权益标题
            equityAmount: '',//数量
            equityPrice: '',//单件标价（￥）
            id: '',//主键id
            merchantEquityCardId: '',//商家数字权益卡id
          }
        ],
        equityTitleList: [
          {
            equityTitle: '',
            equityType: '1',
            optionalQuantity: '',
            isShow: true,
            subtotal: 0, 
            detailList: [
              {equityTitle: '',equityAmount: '',equityPrice: '',},
            ],
          },
        ],
        buyDisplay: "1",//购买须知前端展示 1 显示 2 隐藏
        buyNotes: `1.有效期：xxxx.xx.xx-xxxx.xx.xx；
2.使用时间：营业时间内可用；
3.使用规则
·本单发票由商家提供，详情请咨询商家；
·不可使用包间；
·仅限堂食/堂食外带均可；
·赚卡用户不可同时享受商家其他优惠；
·酒水饮料等问题，请致电商家咨询，以商家反馈为准；
·如部分菜品因时令或其他不可抗因素导致无法提供，商家会用等价菜品替换，具体事宜请与商家协商；
·无需预约，消费高峰期可能需要等位；`,//购买须知
        equityExplain: '',//权益说明
        imageTextDisplay: '1',//图文介绍前端展示 1 显示 2 隐藏
        imageTextList: [],//图文介绍
        expireDateBegin: '',//活动开始时间
        expireDateEnd: '',//活动结束时间
        expireDate:[], //赚卡有效期（校验用）
      },
      twoForm: {
        checkList: [],//校验用
        //激励后消费活动
        incentivePO: {
          cocoIncentive: '2',//CoCo激励 1 开启 2 关闭
          cocoIncentiveAmount: '',//CoCo激励数额
          cocoSoldStock: '',//CoCo激励已售库存
          cocoStock: '',//CoCo激励库存
          endTime: '',//活动结束时间
          startTime: '',//活动开始时间
          equityCardId: '',//数字权益卡id
          incentiveStatus: '2',//消费后激励活动 1 开启 2 关闭
          medalIncentive: '2',//勋章激励 1 开启 2 关闭
          tfIncentive: '2',//椰分激励 1 开启 2 关闭
          tfIncentiveAmount: '',//椰分激励数额
          tfSoldStock: '',//椰分激励已售库存
          tfStock: '',//椰分激励库存
        },
        // 同行助力激励活动
        assistancePO: {
          incentiveStatus: '2',//同行助力激励状态 1 开启 2 关闭
          stockStatus: '1',//活动库存状态 1 不限制 2 限制
          stock: '',//活动库存数量
          expirationDateHour: '',//活动有效期-小时
          expirationDateMinute: '',//活动有效期-分钟
          expirationDateSecond: '0',//活动有效期-秒
          maxPeopleNum: '',//每份最大助力人数
          guaranteeAmount: '',//保底数量
          maxGiveAmount: '',//最多赠送数量
        },
        //运营补贴活动
        subsidyVO: {
          cashAmount: '',//补贴活动价/现金数额
          id: '',//商家数字权益卡id
          integralAmount: '',//积分数额
          payType: '',//活动支付方式 1现金支付 2现金+积分支付 3 积分支付
          subsidyStatus: '2',//运营补贴活动状态 1 开启 2 关闭
          subsidyType: '',//补贴方式 1 平台补贴 2 商户补贴
        },
        value1: 1,
        date: [], //活动时间（校验用）
      },
      threeForm: {
        status: 1,
      },
      tipText: '赠送积分是核销时扣除名额，当配置赠送积分的活动数量少于库存数量时，可能会出现购买时提示赚积分，实际核销时不发放积分的问题',
      //拒绝原因
      ruleForm: {
        refundCause: '',
      },
      //权益标题
      titleForm: {
        equityTitle: '',
        equityType: '1',
        optionalQuantity: '',
        subtotal: 0,
      },
      equityInfoList: [],
      //模拟计算数据
      simulationData: {
        newMin: 0,
        newMax: 0,
        oldMin: 0,
        oldMax: 0,
      },
      functionTypeList:[],
      equitySelectList: [],
      tagList: [],
      integralTypeList: [
        {id: '1',value: 'CoCo'},
        {id: '2',value: '椰分'},
      ],
      infoData: {},
      oneRules: {
        name: [
          { required: true,message: "请填写卡名称",trigger: ["change", "bulr"]}
        ],
        merchantId: [
          { required: true,message: "请选择门店",trigger: ["change", "bulr"]}
        ],
        selStortList: [
          { required: true,message: "请选择店铺",trigger: ["change", "bulr"]}
        ],
        tagIdList: [
          { required: true,message: "请选择标签",trigger: ["change", "bulr"]}
        ],
        issueTotal: [
          { validator: checkInteger,required: true, trigger: ["change", "bulr"]}
        ],
        equityWorth: [
          { validator: checkDecimal,required: true, trigger: ["change", "bulr"]}
        ],
        price: [
          { validator: checkPrice,required: true, trigger: ["change", "bulr"]}
        ],
        limitAmount: [
          { validator: checkInteger,required: true, trigger: ["change", "bulr"]}
        ],
        optionalQuantity: [
          { validator: checkInteger,required: true, trigger: ["change", "bulr"]}
        ],
        thumbnail: [
          {required: true, message: "请上传缩略图",trigger: ["change"]}
        ],
        coverList: [
          {required: true, message: "请上传头图",trigger: ["change"]}
        ],
        equityTitle: [
          { required: true,message: "请输入权益名称",trigger: ["change", "bulr"]}
        ],
      
        equityAmount: [
          { message: "请输入",required: true, trigger: ["change", "bulr"]}
        ],
        equityPrice: [
          { validator: checkEquityPrice,required: true, trigger: ["change", "bulr"]}
        ],
        buyNotes: [
          { required: true,message: "请输入内容",trigger: ["change", "bulr"]}
        ],
        equityExplain: [
          { required: true,message: "请输入内容",trigger: ["change", "bulr"]}
        ],
        imageTextList: [
          {required: true, message: "请上传图文介绍",trigger: ["change"]}
        ],
        expireDate: [
          {required: true,message: "请选择赚卡有效期",trigger: ["change"]}
        ],
      },
      twoRules: {
        date: [
          {required: true,message: "请选择活动时间",trigger: ["change"]}
        ],
        'incentivePO.cocoIncentiveAmount': [
          {validator: checkDecimal,required: true,trigger: ["bulr","change"]}
        ],
        'incentivePO.cocoStock': [
          {validator: checkInteger,required: true,trigger: ["bulr","change"]}
        ],
        'incentivePO.tfIncentiveAmount': [
          {validator: checkDecimal,required: true,trigger: ["bulr","change"]}
        ],
        'incentivePO.tfStock': [
          {validator: checkInteger,required: true,trigger: ["bulr","change"]}
        ],
        'incentivePO.equityCardId': [
          { required: true,message: "请选择勋章",trigger: ["change"]}
        ],
        'assistancePO.stock': [
          {validator: checkInteger,required: true,trigger: ["change"]}
        ],
        'assistancePO.expirationDateHour': [
          {validator: checkTime,required: true,trigger: ["change"]}
        ],
        'assistancePO.expirationDateMinute': [
          {validator: checkTime,required: true,trigger: ["change"]}
        ],
        'assistancePO.expirationDateSecond': [
          {validator: checkTime,required: true,trigger: ["change"]}
        ],
        'assistancePO.maxPeopleNum': [
          {validator: checkInteger,required: true,trigger: ["change"]}
        ],
        'assistancePO.integralType': [
          { required: true,message: "请选择活动奖励类型",trigger: ["change", "bulr"]}
        ],
        'assistancePO.guaranteeAmount': [
          {validator: checkGuaranteeAmount,required: true,trigger: ["change"]}
        ],
        'assistancePO.maxGiveAmount': [
          {validator: checkMaxGiveAmount,required: true,trigger: ["change"]}
        ],

        'subsidyVO.payType': [
          { required: true,message: "请选择活动支付方式",trigger: ["change", "bulr"]}
        ],
        'subsidyVO.subsidyType': [
          { required: true,message: "请选择补贴方式",trigger: ["change", "bulr"]}
        ],
        'subsidyVO.cashAmount': [
          {validator: checkDecimal,required: true,trigger: ["change"]}
        ],
        'subsidyVO.integralAmount': [
          {validator: checkDecimal,required: true,trigger: ["change"]}
        ],
      },
      rules: {
        refundCause: [
          {required: true,message: "请输入拒绝原因",trigger: ["change","bulr"]}
        ],
      },
      titleRules: {
        equityTitle: [
          {required: true,message: "请输入标题名称",trigger: ["bulr"]}
        ],
        optionalQuantity: [
          {required: true,message: "请输入数量",trigger: ["bulr"]}
        ],
      },
      spanArr: [],
      pos: 0,
    };
  },
  created() {
    this.pathType = this.$route.query.pathType
    this.permissions = this.$route.query.permissions
    this.getMerchant()
    this.getStatusList()
    this.getEquityList()
    this.getTag()
    if(this.pathType == 'edit' || this.pathType == 'review' || this.pathType == 'revise'){
      var active = this.$route.query.active
      if(active){
        this.active = active
      }
      this.title = '编辑首页弹窗活动'
      this.oneForm.id = this.$route.query.id
      this.getInfo()
    }else if(this.pathType == 'add'){
      this.title = '新增首页弹窗活动'
    }else if(this.pathType == 'revise'){
      this.title = '修改首页弹窗活动'
    }
    
  },
  methods: {
    //获取活动状态字典
    getStatusList() {
      var dictType = "equity_function_type";
      this.$getSelectList(dictType)
        .then((res) => {
          var arr = [
            {
              id: "",
              value: "全部",
            },
          ];
          this.functionTypeList = arr.concat(res.result[0].dictList);
        })
        .finally(() => {});
    },
    //获取所属门店下拉
    getMerchant() {
      shopSelect().then(res => {
        this.merchantList = res.result
      })
    },
    //获取连锁店铺
    getStort() {
      chainSelect(this.oneForm.chainId).then(res => {
        this.stortList = res.result
        // console.log('this.ruleForm.merchantIdList',this.ruleForm.merchantIdList)
      })
    },
    // 获取勋章卡下拉 
    getEquityList() {
      equitySelect().then(res => {
        this.equitySelectList = res.result
      })
    },
    //标签
    getTag(){
      addTagSelect().then( res => {
        this.tagList = res.result
      })
    },
    //勋章信息
    getequityInfo(id){
      equityDetail(id).then( res => {
        this.equityInfoList.push(res.result)
      })
    },
    //获取详情
    getInfo(){
      
      var id = this.oneForm.id
      cardDetail(id).then(res => {
        var data = res.result
        this.infoData = data
        this.oneForm = {
          id: data.id,
          name: data.name, //活动名称  
          merchantId: data.merchantId,//所属门店商家id
          chainId: data.chainId,//连锁总部id
          chainShopList: data.chainShopList,//连锁店铺列表
          selStortList: [],
          tagIdList: data.tagIdList,
          issueTotal: data.issueTotal, //	库存
          equityWorth: data.equityWorth,//原价
          price: data.price,//销售价
          limitBuyType: data.limitBuyType,//限购类型 1 不限购 2 限购
          limitAmount: data.limitAmount,//限购数量
          thumbnail: data.thumbnail,//缩略图
          coverList: data.coverList, //头图
          equityDisplay: data.equityDisplay,//权益详情前端展示 1 显示 2 隐藏
          equityTitleStatus: data.equityTitleStatus,//	权益标题状态 1 不启用 2 启用
          equityList: data.equityList,
          equityTitleList: data.equityTitleList,
          equityTotal:data.equityTotal,
          equityExplainDisplay: data.equityExplainDisplay,//权益说明前端展示 1 显示 2 隐藏
          equityExplain:data.equityExplain,
          buyDisplay: data.buyDisplay,//购买须知前端展示 1 显示 2 隐藏
          buyNotes: data.buyNotes,//购买须知
          imageTextDisplay: data.imageTextDisplay,//图文介绍前端展示 1 显示 2 隐藏
          imageTextList: data.imageTextList,//图文介绍
          id: data.id,
          expireDate:[], //赚卡有效期结束时间
          expireDateBegin:data.expireDateBegin,
          expireDateEnd:data.expireDateEnd,
        }
        if(data.expireDateBegin){
          this.oneForm.expireDate[0] = data.expireDateBegin
        }
        if(data.expireDateEnd){
          this.oneForm.expireDate[1] = data.expireDateEnd
        }
        if (this.pathType != 'add' && data.chainId) {
          this.isChain = true
          this.getStort()
        }
        data.chainShopList.forEach( item => {
          this.oneForm.selStortList.push(item.id)
        })
        this.twoForm = {
          checkList: [],//校验用
          //激励后消费活动
          incentivePO: data.incentivePO,
          // 同行助力激励活动
          assistancePO: data.assistancePO,
          subsidyVO: data.subsidyVO,
          date: [], //活动时间（校验用）
        }
        this.filterCheckList(data.incentivePO)
        if(data.incentivePO.startTime){
          this.twoForm.date[0] = data.incentivePO.startTime
        }
        if(data.incentivePO.endTime){
          this.twoForm.date[1] = data.incentivePO.endTime
        }
        if(!data.assistancePO.stock ){
          this.residueStock = 0
        }else{
          this.residueStock = data.assistancePO.stock - data.assistancePO.soldStock
        }
        
        setTimeout(() => {
          if(data.incentivePO.equityCardId){
            this.getequityInfo(data.incentivePO.equityCardId)
          }
        }, 1000);
        this.oneForm.equityTitleList = data.equityTitleList.map((item,index) => {
          item.subtotal = 0
          item.isShow = false
          this.changePrice('e',item,index)
          return item
        })
        console.log('this.oneForm.equityTitleList',this.oneForm.equityTitleList)
        this.validationEquityTotle()
      })
    },
    //选择店铺
    changeMerchantId(e){ 
      this.oneForm.merchantId = e
      this.filterMerchant(e)
    },
    filterMerchant(e) {
      console.log('哈哈哈哈哈哈哈哈哈',this.merchantList)
      
      this.merchantList.forEach(item => {
        if (item.id == e) {
          if (item.data) {
            this.oneForm.chainId = item.data
            this.isChain = true
            console.log('哈哈哈哈哈哈哈哈哈')
            this.getStort()
          } else {
            this.isChain = false
          }
        }
      })
      this.$forceUpdate()
      console.log('this.isChain',this.isChain)
    },
    //取消
    handleClose(formName) {
      if(this.permissions == 1){
        this.$router.push({
          path: "/merchantsNFR/yeCard",
        })
      }else if(this.permissions == 2){
        this.$router.push({
          path: "/merchantsNFR/yeCardNew",
        })
      }
      
    },
     //封面设置
     uploadPicture(name){
      this.cropperModel = true;
    },
    //图片上传成功后
    handleUploadSuccess (data){
      console.log(data)
      this.oneForm.thumbnail = data.url;
      this.cropperModel = false;
    },
    successImg(e, index) {
  
      console.log(e, index)
      if (e != '') {
        this.oneForm.coverList = e.split(",")
      } else {
        this.oneForm.coverList = []
      }
      this.$refs['imgRef'].clearValidate();
      
    },
    getCommodityImgList(e, index) {
      console.log(e, index)
      if (e != '') {
        this.oneForm.imageTextList = e.split(",")
      } else {
        this.oneForm.imageTextList = []
      }
      this.$refs['commodityImgListRef'].clearValidate();
    },
    //模拟计算
    simulation(){
      
      // 则新用户  （z-x）/ y     ±10%浮动；老用户  （z-x）/ y /5     ±10%浮动
      var guaranteeAmount = parseFloat(this.twoForm.assistancePO.guaranteeAmount) //活动保底获得 x
      var maxGiveAmount = parseFloat(this.twoForm.assistancePO.maxGiveAmount) // 最多赠送数量 z
      var maxPeopleNum = parseFloat(this.twoForm.assistancePO.maxPeopleNum)  //每份最大助力人数 y
      
      if(guaranteeAmount && maxGiveAmount && maxPeopleNum){
        //新用户浮动值计算
        var newNum = (maxGiveAmount - guaranteeAmount) / maxPeopleNum 
        // newNum = Math.round(newNum * 100) / 100
        var newMin = newNum - newNum * 0.1  
        var newMax = newNum + newNum * 0.1
        this.simulationData.newMin = Math.round(newMin * 100) / 100
        this.simulationData.newMax = Math.round(newMax * 100) / 100
        
        // 老用户浮动值计算
        var oldNum = (maxGiveAmount - guaranteeAmount) / maxPeopleNum / 5
        // oldNum = Math.round(oldNum * 100) / 100
        var oldMin = oldNum - oldNum * 0.1
        var oldMax = oldNum + oldNum * 0.1
        this.simulationData.oldMin = Math.round(oldMin * 100) / 100
        this.simulationData.oldMax = Math.round(oldMax * 100) / 100
      }else{
        this.$message.error(`请输入对应的只在模拟计算`);
      }
    },
    // 获取总数
    validationEquityTotle(){
      this.isEquitySubmit = true
      var priceTotal = 0
      this.oneForm.equityTitleList.forEach((item,index)=>{
        // 用户可选数量
        if(item.equityType == 2){
          item.detailList = item.detailList.sort((a, b) => b.equityPrice - a.equityPrice); // 从大到小排序
          item.detailList.slice(0, item.optionalQuantity).forEach( row => {
            if(row.equityPrice){
              priceTotal = priceTotal + parseFloat(row.equityPrice)
              priceTotal = Math.round(priceTotal * 100) / 100

            }
          })
        }else{
          item.detailList.forEach( row => {
            if(row.equityPrice){
              priceTotal = priceTotal + parseFloat(row.equityPrice)
              priceTotal = Math.round(priceTotal * 100) / 100

            }
          })
        }
        if(item.optionalQuantity > item.detailList.length){
          console.log('item.optionalQuantity',item.optionalQuantity)
          console.log('item.detailList.length',item.detailList.length)
          this.isEquitySubmit = false
          console.log('this.isEquitySubmit',this.isEquitySubmit)
        }
      })
      this.oneForm.equityTotal = priceTotal
      console.log('priceTotal',priceTotal)
    },
    // 校验权益数量
    checkEquity(){
      this.oneForm.equityTitleList.forEach((item,index)=>{
        if(item.optionalQuantity > item.detailList.length){
          this.$message.error('权益数量需要大于可选数量')
          return false
        }
      })
    },
    // 赚卡有效期
    getEarnACardTime(e){
      this.oneForm.expireDateBegin = e[0] 
      this.oneForm.expireDateEnd = e[1]
    },
    //是否限购选择 limitBuyTypeRef
    radioInput(){
      this.oneForm.limitAmount = ''
    },
    getTime(e){
      console.log("e",e)
      this.twoForm.incentivePO.startTime =  e[0] 
      this.twoForm.incentivePO.endTime = e[1]
    },
    //勾选活动奖励
    changeCheckList(e){
      
      console.log('e',e)
      this.twoForm.checkList = Array.from(this.twoForm.checkList)
      this.twoForm.incentivePO.cocoIncentive = 2
      this.twoForm.incentivePO.tfIncentive = 2
      this.twoForm.incentivePO.medalIncentive = 2
      var list = e
      list.forEach(item => {
        if(item == 1){
          this.twoForm.incentivePO.cocoIncentive = 1
        }else if(item == 2){
          this.twoForm.incentivePO.tfIncentive = 1
        }else if(item == 3){
          this.twoForm.incentivePO.medalIncentive = 1
        }else{
          // this.twoForm.incentivePO.cocoIncentive = 2
          // this.twoForm.incentivePO.tfIncentive = 2
          // this.twoForm.incentivePO.medalIncentive = 2
        }
      })
      this.$forceUpdate()
      console.log('COCO',this.twoForm.incentivePO.cocoIncentive)
      console.log('椰分',this.twoForm.incentivePO.tfIncentive)
      console.log('勋章',this.twoForm.incentivePO.medalIncentive)
    },
    filterCheckList(data){
      if(data.cocoIncentive == 1){
        this.twoForm.checkList[0] = '1'
      }else{
        this.twoForm.checkList[0] = ''
      }

      if(data.tfIncentive == 1){
        this.twoForm.checkList[1] = '2'
      }else{
        this.twoForm.checkList[1] = ''
      }

      if(data.medalIncentive == 1){
        this.twoForm.checkList[2] = '3'
      }else{
        this.twoForm.checkList[2] = ''
      }
    },
    blurShow(e,index){
      this.oneForm.equityTitleList[index].isShow = false
    },
    editOptionalQuantity(e,index){
      this.oneForm.equityTitleList[index].isShow = true
      console.log('editOptionalQuantity',this.oneForm.equityTitleList[index].isShow)
      this.$forceUpdate()
    },
    blurOptionalQuantity(e,index){
      this.submitOptionalQuantity(e,index)
    },
    submitOptionalQuantity(e,index){
      this.oneForm.equityTitleList[index].isShow = false
      var item = this.oneForm.equityTitleList[index]
      console.log('item',item)
      this.changePrice('e',item,index)
      
    },
    changeEquityType(e,index){
      console.log(e)
      if(e == 2){
        this.oneForm.equityTitleList[index].isShow = true
        this.$forceUpdate()
      }
    },
    /* 新增权益标题 */
    addTitle(){
      var obj = {
        equityTitle: '',
        equityType: '1',
        optionalQuantity: '',
        subtotal: 0,
        isShow: true,
        detailList: [
          {equityTitle: '',equityAmount: '',equityPrice: '',},
        ],
      }
      this.oneForm.equityTitleList.push(obj)
    },
   
    // 删除权益标题
    deleteTitleEquity(index){
      this.oneForm.equityTitleList.splice(index,1)
      this.validationEquityTotle()
    },
    //新增权益标题
    addEqList(index){
      var obj = {equityTitle: '',equityAmount: '',equityPrice: ''}
      this.oneForm.equityTitleList[index].detailList.push(obj)
    },
    // 删除权益标题
    deleteEquity(index,childindex){
      this.oneForm.equityTitleList[index].detailList.splice(childindex,1)
      // 删除时重新统计小计
      console.log('this.oneForm.equityTitleList',this.oneForm.equityTitleList[index])
      var item = this.oneForm.equityTitleList[index]
      this.changePrice('e',item,index)
    },
    //
    changePrice(e,item,index){
      var priceTotal = 0
      item.detailList = item.detailList.sort((a, b) => b.equityPrice - a.equityPrice); // 从大到小排序
      if(item.equityType == 2){
        console.log('item',item)
        item.detailList.slice(0, item.optionalQuantity).forEach( row => {
          if(row.equityPrice){
            priceTotal = priceTotal + parseFloat(row.equityPrice)
            priceTotal = Math.round(priceTotal * 100) / 100
          }
        })
      }else{
        item.detailList.forEach( row => {
          if(row.equityPrice){
            priceTotal = priceTotal + parseFloat(row.equityPrice)
            priceTotal = Math.round(priceTotal * 100) / 100
          }
        })
      }
      console.log('priceTotal',priceTotal)
      this.oneForm.equityTitleList[index].subtotal = priceTotal
      this.validationEquityTotle()
      this.$forceUpdate()
    },
    
    //增加权益/*  */
    addEquity(){
      var obj = {
            sort: '1',//排序号
            equityTitle: '',//权益标题
            equityAmount: '',//数量
            equityPrice: '',//单件标价（￥）
            id: '',//主键id
            merchantEquityCardId: '',//商家数字权益卡id
          }
      this.oneForm.equityList.push(obj)
    },
    //删除权益
    reduceEquity(index){
      this.oneForm.equityList.splice(index,1)
    },
    //开关权益详情
    changeEquityDisplay(e){
      this.keepEquityList = this.oneForm.equityList
      console.log(e)
      if(e == 1){
        if(this.oneForm.equityList.length == 0){
          this.oneForm.equityList = [
            {
              sort: '1',//排序号
              equityTitle: '',//权益标题
              equityAmount: '',//数量
              equityPrice: '',//单件标价（￥）
              id: '',//主键id
              merchantEquityCardId: '',//商家数字权益卡id
            }
          ]
        }else{
          this.oneForm.equityList = this.keepEquityList
        }
      }
    },
    changeEquityTitleStatus(e){
      if(e == 1){
        if(this.oneForm.equityList.length == 0){
          this.oneForm.equityList = [
            {
              sort: '1',//排序号
              equityTitle: '',//权益标题
              equityAmount: '',//数量
              equityPrice: '',//单件标价（￥）
              id: '',//主键id
              merchantEquityCardId: '',//商家数字权益卡id
            }
          ]
        }
      }else{
        if(this.oneForm.equityTitleList.length == 0){
          this.oneForm.equityTitleList = [
            {
              equityTitle: '',
              equityType: '1',
              optionalQuantity: '',
              isShow: true,
              subtotal: 0, 
              detailList: [
                {equityTitle: '',equityAmount: '',equityPrice: '',},
              ],
            },
          ]
        }
      }
    },
    changeChainShopList(e){
      console.log('e',e)
      console.log('this.stortList',this.stortList)
     
      this.oneForm.chainShopList = []
      e.forEach(item => {
        this.stortList.forEach(bitem => {
          var obj= {
            id: '',
            shopName: '',
          }
          if(item == bitem.id){
            obj.id = bitem.id
            obj.shopName = bitem.value
            this.oneForm.chainShopList.push(obj)
          }
        })
        
      })
      console.log('this.oneForm.chainShopList',this.oneForm.chainShopList)
    },
    //选择权益卡
    changeEquityCardId(e){
      this.equityInfoList = []
      this.getequityInfo(e)
    },
    //下一步
    next(formName){
      this.validationEquityTotle()
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(!this.isEquitySubmit){
            this.$message.error('权益数量需要大于可选数量')
            return
          }
          this.active = this.active + 1
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //上一步
    prev(formName){
      this.$refs[formName].clearValidate()
      this.active = this.active - 1
    },
    //提交数据前处理
    dealWith(){
      if(this.oneForm.equityDisplay == 2){
        this.oneForm.equityList = []
      }
    },
    submitOne(formName,type) {
      this.validationEquityTotle()
      var saveStatus = type //保存状态 1 保存草稿 2 保存提交
      //创建确定
      this.$refs[formName].validate(valid => {
        if (valid) {

          if(this.isEquitySubmit == false){
            this.$message.error('权益数量需要大于可选数量')
            return
          }
          this.dealWith()
          this.AgreeLoading = true
          this.twoForm.assistancePO.expirationDateSecond = '0'
          var data = {
            saveStatus: saveStatus,
            ...this.oneForm,
            ...this.twoForm,
          }
          console.log('data',data);
          if(this.pathType == 'add'){
            addCard(data).then(res => {
              if(type == 1){
                this.handleClose()
              }else if(type == 2){
                this.active = 3
                this.successId = res.result
              }
              setTimeout(() => {
                this.$message.success('创建成功')
                this.AgreeLoading = false
              }, 1000);
            }).finally(()=>{
              this.AgreeLoading = false
            })
          }else if(this.pathType == 'edit'){
            editCard(data).then(res => {
              this.handleClose()
              this.$message.success('修改成功')
              setTimeout(() => {
                this.AgreeLoading = false
              }, 1000);
            }).finally(()=>{
              this.AgreeLoading = false
            })   
          }else if(this.pathType == 'revise'){
            modifyCard(data).then(res => {
              this.handleClose()
              this.$message.success('修改成功')
              setTimeout(() => {
                this.AgreeLoading = false
              }, 1000);
            }).finally(()=>{
              this.AgreeLoading = false
            })   
          }
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //跳过配置
    submitConfig(){
      this.dealWith()
      this.AgreeLoading = true
      this.twoForm.assistancePO.expirationDateSecond = '0'
      var data = {
          saveStatus: 1,
          ...this.oneForm,
          ...this.twoForm,
        }
      addCard(data).then(res => {
        this.handleClose()
        this.$message.success('创建成功')
        setTimeout(() => {
          this.AgreeLoading = false
        }, 1000);
      }).finally(()=>{
        this.AgreeLoading = false
      })
    },
    //第二部提交
    submitTwo(formName,type){
      this.dealWith()
      console.log('this.pathType',this.pathType)
      var saveStatus = type //保存状态 1 保存草稿 2 保存提交
      //创建确定
      this.$refs[formName].validate(valid => {
        if (valid) {
        console.log('this.pathType',this.pathType)

          this.AgreeLoading = true
          this.twoForm.assistancePO.expirationDateSecond = '0'
          var data = {
            saveStatus: saveStatus,
            ...this.oneForm,
            ...this.twoForm
          }
          if(this.pathType == 'add'){
            addCard(data).then(res => {
              this.active = 3
              this.successId = res.result
              this.$message.success('创建成功')
              setTimeout(() => {
                this.AgreeLoading = false
              }, 1000);
            }).finally(()=>{
              this.AgreeLoading = false
            })
          }else if(this.pathType == 'edit'){
            editCard(data).then(res => {
              this.handleClose()
              this.$message.success('修改成功')
              setTimeout(() => {
                // this.active = 3
               
                this.AgreeLoading = false
              }, 1000);
            }).finally(()=>{
              this.AgreeLoading = false
            })
          }
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //第三部关闭
    submitClose(){
      this.AgreeLoading = true
      var data = {
        id: this.successId,
        upStatus: this.threeForm.status,
      }
      upStatus(data).then(res => {
        this.handleClose()
        this.$message.success('修改成功')
        this.AgreeLoading = false
      }).finally(()=>{
        this.AgreeLoading = false
      })
    },
    editForm(formName, status) {
      //编辑确定
      console.log(this.ruleForm);
      this.$refs[formName].validate(valid => {
        if (valid) {
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //拒绝
    reject(formName){
      
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.dialogVisible = true
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //同意
    agree(formName){
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm('是否同意发布', '提示', {
            confirmButtonText: '同意',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.AgreeLoading = true
            this.twoForm.assistancePO.expirationDateSecond = '0'
            var data = {
              id: this.oneForm.id,
              status: 1,
              ...this.oneForm,
              ...this.twoForm
            }
            auditCard(data).then(res => {
              setTimeout(() => {
                this.handleClose()
                this.$message.success('发布成功')
                this.AgreeLoading = false
              }, 1000);
            }).finally(()=>{
              this.AgreeLoading = false
            })
            
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });          
          });
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //提交拒绝
    submitReview(formName){
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.AgreeLoading = true
          this.twoForm.assistancePO.expirationDateSecond = '0'
          var data = {
            id: this.oneForm.id,
            status: 2,
            ...this.ruleForm,
            ...this.oneForm,
            ...this.twoForm
          }
          auditCard(data).then(res => {
            setTimeout(() => {
              this.handleClose()
              this.$message.success('拒绝成功')
              this.AgreeLoading = false
            }, 1000);
          }).finally(()=>{
            this.AgreeLoading = false
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName){
      this.dialogVisible = false
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px ;
}
.steps{
  padding: 24px 0;
}
.title{
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  color: #1890ff;
  padding: 10px 0;
  border-bottom: 4px solid #1890ff;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  span{
    padding-top: 8px;
  }
}
.checkBox{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  .el-select{
    margin: 0 8px;
    width: 200px;
  }
  .el-input{
    width: 100px;
    margin: 0 8px;
  }
  .el-form-item{
    display: flex;
  }
}
.timeBox{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .el-input{
    width: 140px;
    margin: 0 8px;
  }
  span{
    margin: 0 8px;
  }
}
.inpBox{
  display: flex;
  justify-content: flex-start;
  // align-items: center;
  .blue{
    color: #1890ff;
    margin-top: 10px;
  }
  .el-input{
    width: 150px;
    margin: 0 8px;
  }
  .el-select{
    width: 150px;
  }
  
  ::v-deep .el-input-group__append{
    padding: 0 8px !important;
  }
}
.stockNum{
    margin: 8px 0 0 5px;
  }
.tipsBox{
  margin: 14px 0;
  color: red;
}
.calculateBox{
  display: flex;
  justify-content: center;
  .biaoG{
    margin-right: 20px;
    border: 1px solid #dfe6ec;
    .head{
      display: flex;
      width: 400px;
      border-bottom: 1px solid #dfe6ec;
      div{
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #333;
        height: 50px;
      }
      div:first-child{
        border-right: 1px solid #dfe6ec;
      }
    }
  }
}
.statusBox{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 50px;

  .status{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    .tips{
      margin-top: 20px;
    }
  }
}
.equityBox{
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  padding: 20px;
  width: 100%;
  
  .el-input{
    width: 250px !important;
  }
}
.headBox{
    width: 100%;
    display: flex;
    justify-content:flex-start;
    margin-bottom: 20px;
    position: relative;
    border-bottom: 4px solid #1890ff;
    // .el-input{
    //   width: 200px !important;
    // }
    .btn{
      margin-left: 40px;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
.el-select{
  width: 100%;
}
.txt{
  font-size: 20px;
  color: red;
  font-weight: 500;
}
.button_box{
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

//缩略图
.upload-list-cover{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 40px;
      align-items: center;
      background: rgba(0,0,0,.6);
      opacity: 0;
      transition: opacity 1s;
  }
  .cover_icon {
    font-size: 30px;
  }
  .upload-btn{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #cccccc;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 1px #cccccc;
  }
  .upload-btn:hover {
    border: 1px solid #69b7ed;
  }
  .upload-btn i{
    margin: 5px;
  }
  .souImg{
    border-radius: 6px;
  }
</style>
    